<template>
	<view class="main-container">
	<!-- 	<view class="bottom-container">
			<view @click="scanQrCode" class="bottom-content">
				<view class="scan-qrcode-icon"><image class="" :src="scanQrcodeIcon"></image></view>
				<view class="bottom-header-right">
					<view>扫码发放</view>
					<view class="tips">扫描用户出示的用户码</view>
				</view>
				<view><image class="vc-item-arrow" :src="right"></image></view>
			</view>
		</view> -->
		<view class="top-container">
			<view class="top-header">
				<view class="top-header-image"><image :src="editIcon"></image></view>
				<view class="top-header-right">
					<view>手动发放</view>
					<view class="tips">输入用户编号查询用户</view>
				</view>
			</view>
			<input type="number" v-model="userNumber" placeholder="请输入用户编号" maxlength="10" class="input-text" @confirm="searchCustomer"/>
			<view class="opretion-btn bottom-change-view" @click="searchCustomer">查询用户</view>
		</view>
	</view>
</template>

<script>
import { errorToShow } from '@/config/common.js';
import { base64Decode, timeDifference } from '@/config/utils.js';
import { formatDate } from '@/config/common.js';
import scanQrcodeIcon from '@/static/images/scan-qrcode-icon.png';
import editIcon from '@/static/images/edit-icon.png';
import right from '@/static/images/right.png';
export default {
	data() {
		return {
			qrMiniteExpirred: 3,
			scanQrcodeIcon: scanQrcodeIcon,
			editIcon: editIcon,
			right: right,
			userNumber: ''
		};
	},
	onLoad() {},
	onShow() {
		this.userNumber = '';
	},
	methods: {
		scanQrCode() {
			const _that = this;
			uni.scanCode({
				onlyFromCamera: true,
				success: function(res) {
					_that.qrcodeSuccess(res.result);
				},
				fail: function(res) {
					errorToShow('获取二维码信息失败');
				}
			});
		},
		qrcodeSuccess(resultValue) {
			try {
				if (!resultValue) {
					errorToShow('获取二维码信息失败');
					return;
				}
				let qrCodeStr = base64Decode(resultValue);
				const qrCodeObj = JSON.parse(qrCodeStr);
				if (!qrCodeObj.UserNumber) {
					errorToShow('请检查是否为用户码');
					return;
				}
				if (!qrCodeObj.generateDate) {
					errorToShow('请检查是否为用户码');
					return;
				}
				let now = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
				let diffminute = Number.parseFloat(timeDifference(qrCodeObj.generateDate, now));
				if (diffminute > this.qrMiniteExpirred) {
					errorToShow('二维码已过期');
					return;
				}
				this.userNumber = qrCodeObj.UserNumber;
				this.gotoProvideCustomer();
			} catch {
				errorToShow('请检查是否为用户码');
			}
		},
		gotoProvideCustomer() {
			uni.navigateTo({
				url: '/packagePages/mine/coupon/couponProvide/provideCustomer?userNumber=' + this.userNumber
			});
		},
		searchCustomer() {
			if (!this.userNumber) {
				errorToShow('请输入用户编号');
				return;
			}
			this.gotoProvideCustomer();
		}
	}
};
</script>

<style scoped lang="scss">
.main-container {
	background-color: $main-page-color;
	height: 100vh;
	padding: 20rpx;
	overflow-y: hidden;
}

.top-container {
	display: flex;
	align-items: center;
	flex-direction: column;
	background-color: #ffffff;
	padding: 20rpx 40rpx 40rpx 40rpx;
	border-radius: 15rpx;
	.top-header {
		display: flex;
		width: 100%;
		align-items: center;
		margin-bottom: 40rpx;
		&-image {
			height: 60rpx;
			width: 60rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		&-right {
			margin-left: 30rpx;

			.tips {
				color: $main-text-color-grey;
				font-size: 24rpx;
				margin-top: 4rpx;
			}
		}
	}

	.input-text {
		line-height: 90px;
		height: 90rpx;
		border: 1px solid $main-line-color-split;
		border-radius: 10rpx;
		width: 100%;
		vertical-align: middle;
		padding-left: 10rpx;
	}

	.opretion-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background-color: #279146;
		padding-left: 10rpx;
		margin-top: 66rpx;
		border-radius: 90rpx;
	}
}
.bottom-container {
	text-align: center;
	background-color: #ffffff;
	padding: 20rpx 40rpx;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	&-title {
		color: #0460fe;
	}
	.bottom-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.scan-qrcode-icon {
		width: 61rpx;
		height: 55rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.bottom-header-right {
		margin-left: 30rpx;
		text-align: left;
		flex-grow: 2;

		.tips {
			color: $main-text-color-grey;
			font-size: 24rpx;
			margin-top: 4rpx;
		}
	}
}
.vc-item-arrow {
	width: 15rpx;
	height: 27rpx;
}
</style>
